<template>
  <div>
    <slot v-if="listConfig.title">
      <p style="font-size: 16px; font-weight: 500">{{ listConfig.title }}</p>
    </slot>
    <div
      v-if="listConfig.btns && hasAuth(listConfig.btns)"
      class="btn-wrap"
    >
      <template v-for="btn in listConfig.btns">
        <el-button
          v-if="hasAuth(btn)"
          :key="btn.text"
          :type="btn.type"
          size="small"
          :disabled="btn.disabled && btn.disabled()"
          @click="btn.onClick"
        >
          {{ btn.text }}
        </el-button>
      </template>
    </div>
    <el-table
      :ref="tableName"
      v-loading="loading"
      border
      :data="list"
      :header-cell-style="{ backgroundColor: '#f2f2f2', color:'#333'}"
      :row-key="getRowKey"
      @selection-change="handleSelectionChange"
      @sort-change="handleSortChange"
    >
      <!-- reserve-selection 仅对type=selection的列有效，类型为Boolean，为true则会数据更新之后保留之前选中的数据(需指定row-key)-->
      <el-table-column
        v-if="listConfig.selectType"
        :type="listConfig.selectType"
        width="55"
        align="center"
        :selectable="listConfig.selectable"
        :reserve-selection="true"
        fixed
      />
      <el-table-column
        v-if="listConfig.labelIndex"
        :label="listConfig.labelIndex"
        type="index"
        width="55"
        align="center"
      />
      <!-- v-bind 对象一次绑定多个 -->
      <el-table-column
        v-for="item in listConfig.columns"
        :key="item.prop"
        :formatter="item.formatter"
        align="center"
        v-bind="item"
      >
        <template slot-scope="{row}">
          <el-switch
            v-if="item.type === DISPLAY_TYPE_SWITCH"
            :value="row[item.prop]"
            :active-text="item.activeText || ''"
            :inactive-text="item.inactiveText || ''"
            active-color="#13ce66"
            inactive-color="#A9A9A9"
            @change="(val) => {
              row[item.prop] = val
              item.onchange(val,row)
            }"
          />
          <span v-else-if="item.type === DISPLAY_TYPE_ENUM">{{ item.enumMap[row[item.prop]] }}</span>
          <span v-else-if="item.type === DISPLAY_TYPE_IMAGE" class="column-img">
            <img :src="row[item.prop]" width="60" @click="item.onClick && item.onClick()">
          </span>
          <span v-else-if="item.type === DISPLAY_TYPE_CUSTOM">{{ item.getLabel && item.getLabel(row) }}</span>
          <!-- 针对服务管理的特殊处理 -->
          <custom-status
            v-else-if="item.type === DISPLAY_TYPE_SPECIAL"
            :row="row"
            :map-obj="item.enumMap"
          />
          <span v-else>{{ item.prefix ? `${item.prefix}${row[item.prop]}` : row[item.prop] }}</span>
        </template>
      </el-table-column>
      <el-table-column
        v-if="listConfig.opt && hasAuth(listConfig.opt.buttons)"
        :label="handleAttribute(listConfig.opt.title, '操作')"
        align="center"
        v-bind="listConfig.opt.attrs"
      >
        <template slot-scope="scope">
          <el-row>
            <el-col
              v-for="(item, index) in handleAttribute(listConfig.opt.buttons, [])"
              :key="index"
              :span="listConfig.opt.lines ? 24/listConfig.opt.lines : Math.floor(24/listConfig.opt.buttons.length)"
            >
              <el-button
                v-if="hasAuth(item)"
                type="text"
                size="mini"
                :disabled="handleRowBtnDisabled(item.disabled, {...scope.row, $index: scope.$index })"
                @click="handleOptClick(item, {...scope.row, $index: scope.$index })"
              >
                {{ item.text }}
              </el-button>
            </el-col>
          </el-row>
        </template>
      </el-table-column>
    </el-table>
    <div v-if="pagination" class="pagination-wrap">
      <el-pagination
        v-if="pagination.total > 0"
        background
        :current-page.sync="pagination.pageNum"
        :page-size.sync="pagination.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :page-sizes="pagination.pageSizes || [10, 20, 50, 100, 200]"
        :total="pagination.total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>
  </div>
</template>

<script>
import {
  DISPLAY_TYPE_SWITCH,
  DISPLAY_TYPE_ENUM,
  DISPLAY_TYPE_IMAGE,
  DISPLAY_TYPE_CUSTOM,
  DISPLAY_TYPE_SPECIAL
} from './Constant'
import customStatus from './components/customStatus'
export default {
  name: 'CommonList',
  components: { customStatus },
  props: {
    list: {
      type: Array,
      default: () => []
    },
    listConfig: {
      type: Object,
      required: true
    },
    pagination: {
      type: Object,
      default: null
    },
    loading: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      selectIds: [],
      DISPLAY_TYPE_SWITCH,
      DISPLAY_TYPE_ENUM,
      DISPLAY_TYPE_IMAGE,
      DISPLAY_TYPE_CUSTOM,
      DISPLAY_TYPE_SPECIAL
    }
  },
  computed: {
    tableName() {
      return this.listConfig.tableName || 'listTable'
    }
  },
  methods: {
    getRowKey(row) {
      return this.listConfig.rowKey ? row[this.listConfig.rowKey] : row.id
    },
    clearSelection() {
      this.$refs[this.tableName].clearSelection()
    },
    hasAuth(btns) {
      // if (Array.isArray(btns)) {
      //   return btns.some(btn => this.$checkPermission(btn.authKey || '', this.$route))
      // }
      // return this.$checkPermission(btns.authKey || '', $route)
      return true
    },
    handleAttribute(attribute, defaultValue) {
      if (attribute === false || attribute === 0 || attribute === '') {
        return attribute
      }
      return attribute || defaultValue
    },
    handleRowBtnDisabled(disabled = false, row) {
      if (typeof disabled === 'boolean') {
        return disabled
      } else if (typeof disabled === 'function') {
        return disabled(row)
      }
      return Boolean(disabled)
    },
    handleOptClick(acItem, data) {
      if (acItem.isConfirm) {
        this.$confirm(acItem.msg, acItem.tip || '提示', {
          confirmButtonText: acItem.confirmText || '确定',
          cancelButtonText: acItem.cancelText || '取消',
          type: 'warning'
        }).then(() => {
          acItem.onClick(data)
        }).catch(() => {})
      } else {
        acItem.onClick(data)
      }
    },
    handleSelectionChange(val) {
      this.$emit('selection-change', val)
    },
    handleSizeChange(pageSize) {
      this.$emit('list-query', { pageNum: 1, pageSize })
    },
    handleCurrentChange(pageNum) {
      this.$emit('list-query', { pageNum })
    },
    handleSortChange(data) {
      this.$emit('sort-change', data)
    }
  }
}
</script>

<style lang="scss" scoped>
.column-img {
  width: 60px;
  height: 60px;
  display: inline-block;
}
.btn-wrap {
  display: flex;
  //justify-content: flex-end;
  margin-bottom: 10px;
}
.pagination-wrap {
  width: 100%;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  padding-top: 12px;
}
</style>
